<template>
    <div>
        <div class="userInfo">
            <div class="userInfoBox">
                <div class="userIcon">
                    <img src="@/assets/user.webp" alt="">
                    <div class="userIconEdit"></div>
                </div>
                <div class="userInfoText">
                    <p class="userName">
                        {{ userStore.userInfo.nickname }}
                    </p>
                    <p class="userId">
                        ID：{{ userStore.userInfo.id }}
                        <span class="copyBtn"></span>
                    </p>
                </div>
            </div>
        </div>
        <nut-collapse v-show="!showDetail" v-model="collapseVal1" accordion>
            <nut-collapse-item name="name1" title="我的个人资料">
                <p class="person-item" @click="toDetailBlock(1)">
                    <span class="item-icon icon4"></span>
                    编辑个人档案
                </p>
                <p class="person-item" @click="toDetailBlock(2)">
                    <span class="item-icon icon3"></span>
                    修改偏好设定
                </p>
                <p class="person-item" @click="toDetailBlock(3)">
                    <span class="item-icon icon1"></span>
                    修改密码
                </p>
                <p class="person-item" @click="toDetailBlock(4)">
                    <span class="item-icon icon2"></span>
                    切换账号
                </p>
            </nut-collapse-item>
            <div class="nut-collapse-item nut-collapse-item__border"
                 @click="toDetailBlock(5)">
                <div class="nut-collapse-item__title"
                     style="justify-content: start">
                    关注列表
                    <span style="
                            color: #8d8d8d;
                            font-size: 10px;
                            margin-left: 10px;
                        ">( {{ interestList.length }}成员
                        {{ fllowList.length }}游戏 )</span>
                </div>
            </div>
            <div class="nut-collapse-item nut-collapse-item__border"
                 @click="toDetailBlock(6)">
                <div class="nut-collapse-item__title">
                    我发表的讨论
                </div>
            </div>
            <div class="nut-collapse-item nut-collapse-item__border"
                 @click="toDetailBlock(7)">
                <div class="nut-collapse-item__title">
                    浏览历史
                </div>
            </div>
            <div class="nut-collapse-item nut-collapse-item__border"
                 @click="toDetailBlock(8)">
                <div class="nut-collapse-item__title">
                    下载历史
                </div>
            </div>
        </nut-collapse>

        <template v-if="showDetail">
            <div style="color: #fff">
                <!-- <nut-button size="mini" @click="showDetail=false">
                    返回
                </nut-button> -->
                <template v-if="currentType === 1">
                    <p class="person-item" style="position: relative">
                        <span class="item-icon icon4"></span>
                        编辑个人档案
                        <span class="backBtn" @click="closeWindow">
                            <i class="backIcon"></i>返回
                        </span>
                    </p>
                    <edit-info></edit-info>
                </template>
                <template v-if="currentType === 2">
                    <p class="person-item" style="position: relative">
                        <span class="item-icon icon3"></span>
                        修改偏好设定
                        <span class="backBtn" @click="closeWindow">
                            <i class="backIcon"></i>返回
                        </span>
                    </p>
                    <edit-set></edit-set>
                </template>
                <template v-if="currentType === 3">
                    <p class="person-item" style="position: relative">
                        <span class="item-icon icon1"></span>
                        修改密码
                        <span class="backBtn" @click="closeWindow">
                            <i class="backIcon"></i>返回
                        </span>
                    </p>
                    <edit-pwd></edit-pwd>
                </template>
                <template v-if="currentType === 4">
                    <p class="person-item" style="position: relative">
                        <span class="item-icon icon2"></span>
                        切换账号
                        <span class="backBtn" @click="closeWindow">
                            <i class="backIcon"></i>返回
                        </span>
                    </p>
                    <switch-id></switch-id>
                </template>
                <template v-if="currentType === 5">
                    <div class="nut-collapse-item nut-collapse-item__border">
                        <div class="nut-collapse-item__title"
                             style="justify-content: start">
                            <span>关注列表 </span><span style="
                                    color: #8d8d8d;
                                    font-size: 10px;
                                    margin-left: 10px;
                                ">( {{ interestList.length }}成员
                                {{ fllowList.length }}游戏 )</span>
                            <span class="backBtn" @click="closeWindow">
                                <i class="backIcon"></i>返回
                            </span>
                        </div>
                        <my-fllow :fllowList="fllowList" :interestList="interestList"></my-fllow>
                    </div>
                </template>
                <template v-if="currentType === 6">
                    <div class="nut-collapse-item nut-collapse-item__border">
                        <div class="nut-collapse-item__title">
                            我发表的讨论
                            <span class="backBtn" @click="closeWindow">
                                <i class="backIcon"></i>返回
                            </span>
                        </div>
                    </div>
                    <pub-dis></pub-dis>
                </template>
                <template v-if="currentType === 7">
                    <div class="nut-collapse-item nut-collapse-item__border">
                        <div class="nut-collapse-item__title">
                            浏览历史
                            <span class="backBtn" @click="closeWindow">
                                <i class="backIcon"></i>返回
                            </span>
                        </div>
                    </div>
                    <view-history></view-history>
                </template>
                <template v-if="currentType === 8">
                    <div class="nut-collapse-item nut-collapse-item__border">
                        <div class="nut-collapse-item__title">
                            下载历史
                            <span class="backBtn" @click="closeWindow">
                                <i class="backIcon"></i>返回
                            </span>
                        </div>
                    </div>
                    <view-history></view-history>
                </template>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import EditInfo from './components/editInfo.vue'
import EditPwd from './components/editPwd.vue'
import SwitchId from './components/switchId.vue'
import EditSet from './components/editSet.vue'
import MyFllow from './components/myFllow.vue'
import PubDis from './components/pubDis.vue'
import viewHistory from './components/viewHistory.vue'
import { useUserStore } from '@/store/user'
import { axiosService } from '@/http/sever'
import { showNotify } from '@nutui/nutui'

const showDetail = ref(false)
const collapseVal1 = ref(['name1'])
const currentType = ref(0)

const userStore = useUserStore()

const toDetailBlock = (type: number) => {
    showDetail.value = true
    currentType.value = type
}
const closeWindow = () => {
    showDetail.value = false
}

// 关注的用户
const fllowList = ref([])
const getFllowList = () => {
    axiosService
        .post('/api/User/userFollowList', {
            page: 1
        })
        .then((res) => {
            fllowList.value = res.data.items
            console.log('关注的用户', fllowList)
        })
        .catch((err) => {
            showNotify.danger(err.msg || '登录失败')
        })
}
getFllowList()

// 关注的游戏
const interestList = ref([])
const getInterestList = () => {
    axiosService
        .post('/api/User/myFavorite', {
            page: 1
        })
        .then((res) => {
            interestList.value = res.data.items
            console.log('关注的游戏', interestList)
        })
        .catch((err) => {
            showNotify.danger(err.msg || '登录失败')
        })
}
getInterestList()
</script>

<style scoped lang="scss">
:deep(.nut-collapse-item .nut-collapse-item__title) {
    background-color: #1c1c1c;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
}

:deep(.isSetPage .nut-collapse-item__title) {
    background-color: #5f5f5f !important;
}
:deep(.isSetPage .nut-collapse__item-wrapper__content) {
    padding-top: 0 !important;
}

:deep(.nut-collapse-item__border .nut-collapse-item__title::after) {
    border-bottom: 1px solid #2f2f2f;
}

:deep(.nut-collapse__item-wrapper__content) {
    background-color: #5f5f5f !important;
    color: #fff !important;
    padding: 15px 20px !important;
}

.userInfo {
    display: flex;
    justify-content: center;
    padding: 25px;

    .userInfoBox {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        gap: 20px;

        .userIcon {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            position: relative;

            img {
                width: 100%;
            }

            .userIconEdit {
                position: absolute;
                width: 25px;
                height: 25px;
                background-color: #5f5f5f;
                border-radius: 50%;
                left: 5px;
                bottom: 0;
                background: url("../../assets/userIconEdit.png") no-repeat
                    center;
                background-size: contain;
            }
        }

        .userInfoText {
            .userName {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 8px;
            }

            .userId {
                font-size: 13px;
                color: #c1c1c1;

                .copyBtn {
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    background: url("../../assets/copy.png") no-repeat center;
                    background-size: contain;
                    margin-left: 3px;
                    margin-bottom: -1px;
                }
            }
        }
    }
}

.person-item {
    font-size: 13px;
    padding: 10px 0;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding-left: 10px;

    .item-icon {
        display: inline-block;
        width: 11px;
        height: 11px;
        margin-right: 10px;
        margin-top: -2px;
        &.icon1 {
            background: url("../../assets/user-1.png") no-repeat center;
            background-size: contain;
        }
        &.icon2 {
            background: url("../../assets/user-2.png") no-repeat center;
            background-size: contain;
        }
        &.icon3 {
            background: url("../../assets/user-3.png") no-repeat center;
            background-size: contain;
        }
        &.icon4 {
            background: url("../../assets/user-4.png") no-repeat center;
            background-size: contain;
        }
    }
}

.backBtn {
    position: absolute;
    right: 20px;
    display: flex;
    align-items: center;
    .backIcon {
        margin-right: 3px;
        margin-top: -1px;
        display: inline-block;
        width: 15px;
        height: 15px;
        background: url("../../assets/back.png") no-repeat center;
        background-size: contain;
    }
}
</style>
